<template>
  <van-popup
    v-model="isShow"
    closeable
    round
    position="bottom"
    class="popup-appoint"
  >
    <div class="hd">
      <h3>选择预约时间段</h3>
    </div>
    <div class="bd">
      <template v-if="row.schedulingType == '0'">
        <div class="title">上午号源</div>
        <van-row>
          <van-col span="8" v-for="(item,index) in list.slice(0,8)" :key="index" @click="selectTime(item)">
            <van-tag plain :type="item.disabled ? 'default' : 'primary'" size="medium" round>{{item.name}}</van-tag>
          </van-col>
        </van-row>
      </template>
      <template v-else>
        <div class="title">下午号源</div>
        <van-row>
          <van-col span="8" v-for="(item,index) in list.slice(8)" :key="index" @click="selectTime(item)">
            <van-tag plain :type="item.disabled ? 'default' : 'primary'" size="medium" round>{{item.name}}</van-tag>
          </van-col>
        </van-row>
      </template>
    </div>
  </van-popup>
</template>
<script>
import moment from 'moment';
export default {
  data(){
    return {
      isShow: false,
      active: 0,
      row: {},
      list:[
        {name: '08:00~08:30', num: 10, disabled: true},
        {name: '08:30~09:00', num: 10, disabled: true},
        {name: '09:00~09:30', num: 10, disabled: true},
        {name: '09:30~10:00', num: 10, disabled: true},
        {name: '10:00~10:30', num: 10, disabled: true},
        {name: '10:30~11:00', num: 10, disabled: true},
        {name: '11:00~11:30', num: 10, disabled: true},
        {name: '11:30~12:00', num: 10, disabled: true},
        {name: '14:00~14:30', num: 10, disabled: true},
        {name: '14:30~15:00', num: 10, disabled: true},
        {name: '15:00~15:30', num: 10, disabled: true},
        {name: '15:30~16:00', num: 10, disabled: true},
        {name: '16:00~16:30', num: 10, disabled: true},
        {name: '16:30~17:00', num: 10, disabled: true},
        {name: '17:00~17:30', num: 10, disabled: true},
        {name: '17:30~18:00', num: 10, disabled: true},
      ]
    }
  },
  methods:{
    init(row){
      this.row = row;
      let currentDay = moment().format('YYYY-MM-DD');
      let currentTime = moment().format('HH:mm:ss');
      let arr = currentTime.split(':');
      let time = arr[0]+''+arr[1]+''+arr[2];
      this.list = this.list.map(item => {
        if(new Date(currentDay).getTime() < new Date(row.schedulingYear).getTime()){
          item.disabled = false;
        }else{
          let arr1 = item.name.substring(0,5).split(':');
          let time1 = arr1[0]+arr1[1]+'00';
          let arr2 = item.name.substring(6).split(':');
          let time2 = arr2[0]+arr2[1]+'00';
          
          if(Number(time) < Number(time2)){
            item.disabled = false;
          }else{
            item.disabled = true;
          }
        }
        return item;
      });
      console.log(this.list);
      this.isShow = true;
    },
    selectTime(item){
      // this.$util.gotoPage('/appointment/detail', {id: 0, from: 'home'});
      if(item.disabled){
        this.$toast('不能预约该时段');
        return;
      }
      this.$emit('confirm', {...item,schedulingYear: this.row.schedulingYear});
      this.isShow = false;
    }
  }
}
</script>